<template>
	<!-- <view>
		<p>当前登录用户{{ store.state.loginInfo.nickname }}</p>
		<input type="text" v-model="account" placeholder="请输入用户名" />
		<input type="password" v-model="password" placeholder="请输入密码" />
		<button @click="login">登录</button>
	</view> -->

	<view class="page">
		<view class="action">
			<view>
				<image src="/static/center/scan.png"></image>
			</view>
			<view>
				<image src="/static/center/setting.png"></image>
			</view>
		</view>
		<view class="user" v-if="store.state.loginInfo.id">
			<image class="avatar" :src="`${apiConfig.baseUrl}`+store.state.loginInfo.avatar"></image>
			<view class="name">
				<text>{{ store.state.loginInfo.nickname }}</text>
				<text>xxxxxxxxx</text>
			</view>
			<image class="right" src="/static/center/right.png"></image>
		</view>
		<view class="user" v-if="!store.state.loginInfo.id" >
			<image class="avatar" src=""></image>
			<view class="name">
				<input type="text" v-model="account" placeholder="请输入用户名" />
				<input type="password" v-model="password" placeholder="请输入密码" />
				<button @click="login">登录</button>
			</view>
			<image class="right" src="/static/center/right.png"></image>
		</view>
		<view class="card" v-for="(v, k) in menus" :key="k">
			<view class="menu">
				<view class="item" v-for="(v_, k_) in v" :key="k_" @click="logout()">
					<image :src="v_.icon"></image>
					<view>{{ v_.name }}</view>
					<image class="arrow" v-if="v_.arrow" src="/static/center/right.png"></image>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { apiConfig } from '../../apiConfig.js';
const account = ref('');
const password = ref('');

const store = useStore();

const menus = ref([
	[
		// { name: '我的书籍', icon: '/static/center/book.png', arrow: true },
		// { name: '我的账户', icon: '/static/center/self.png', arrow: true },
		// { name: '图书捐赠', icon: '/static/center/heart.png', arrow: true },
		// { name: '联系客服', icon: '/static/center/kefu.png', arrow: true },
		// { name: '分享应用', icon: '/static/center/share.png', arrow: false },
		{ name: '退出登录', icon: '/static/center/out.png', arrow: false },
	],
	// [
	// 	{ name: '联系客服', icon: '/static/center/kefu.png', arrow: true },
	// 	{ name: '分享应用', icon: '/static/center/share.png', arrow: false },
	// 	{ name: '退出登录', icon: '/static/center/out.png', arrow: false },
	// ]
])

const login = async () => {
	await store.dispatch('login', { account: account.value, password: password.value });
};
const logout = async () => {
	await store.dispatch('logout');
};

</script>

<style lang="scss">
	@import "./mypage.scss";
</style>